.layadmin-pagetabs {
    .switchSkin (@skinName)
}

.switchSkin (@a)when (@a="dark") {
    background: @pagetabs-bg;

    .layui-icon-prev {
        border-right: @pagetabs-dot-line;
    }

    .layadmin-tabs-control {
        color: @pagetabs-text-color;
        border-left: @pagetabs-dot-line;

        &:hover {
            background: @pagetabs-dot-color;
        }

        .layui-nav {

            a,
            cite {
                color: #fff;
            }

            .layui-nav-child {
                // display: block;
                background: darken(@main-color, 30%);
                border: 1px solid darken(@main-color, 80%);

                dd {
                    a {
                        color: #fff;

                        &:hover {
                            background: darken(@main-color, 50%);
                        }
                    }
                }

                hr {
                    background-color: darken(@main-color, 10%);
                }
            }
        }
    }

    .layui-tab {
        .layui-tab-title {
            li {
                border-right: @pagetabs-dot-line;

                &.layui-this {
                    background: fade(@pagetabs-dot-color, 10%);
                    color: @pagetabs-text-color;
                }

                &:hover {
                    background: fade(@pagetabs-dot-color, 10%);
                    color: @pagetabs-text-color;
                }

                &:after {
                    background-color: @pagetabs-dot-color;
                    top: auto;
                    bottom: 0;
                }
            }
        }
    }
}